<template>
  <view class="container">
    <view class="tip"> 提示:服务期间仅支持修改一次 </view>
    <view class="old-time">
      <view class="title"> 原服务时间： </view>
      <view class="value"> 每周三、五 14:00 </view>
    </view>
    <view class="old-time select-new">
      <view class="title"> 选择新的服务时间 </view>
      <view class="tab-btn">
        <button @click="typeValue = 0" :class="[typeValue == 0 ? 'select' : '']">每周</button>
        <button @click="typeValue = 1" :class="[typeValue == 1 ? 'select' : '']">每月</button>
      </view>
    </view>
    <view class="select-week" v-if="typeValue == 0">
      <view class="w-item" v-for="(item, i) in weekList" :key="i">
        <text>{{ item.text }}</text>
        <view class="checkbox" @click="item.isSelect = !item.isSelect">
          <image v-if="item.isSelect" :src="$img_path('/pagesMine/6.png')" mode="widthFix"></image>
          <image v-else :src="$img_path('/pagesMine/7.png')" mode="widthFix"></image>
        </view>
      </view>
    </view>

    <selectDateTimeVue v-if="typeValue == 1"></selectDateTimeVue>
    <!-- <view class="old-time select-date">
			<view class="title">
				每月最多选择5天
			</view>
			<view class="week-box">
				<view class="w-i">
					周日
				</view>
				<view class="w-i">
					周一
				</view>
				<view class="w-i">
					周二
				</view>
				<view class="w-i">
					周三
				</view>
				<view class="w-i">
					周四
				</view>
				<view class="w-i">
					周五
				</view>
				<view class="w-i">
					周六
				</view>
			</view>
			<view class="date-item">
				<view class="item" :class="[dateVlaue.includes(item.value) ?'select':'', !dateVlaue.includes(item.value)&&dateVlaue.length==5?'disabled':'']" v-for="(item,index) in DateList" :key="index" @click="checkDay(item)">
					<text>{{item.text}}</text>
				</view>
			</view>
		</view> -->

    <view class="select-time" v-if="typeValue == 0">
      <picker-view
        class="time-picker"
        indicator-style="height: 50px;"
        indicator-class="indicator"
        mask-class="maskClass"
        :immediate-change="true"
        :value="timeValue"
        @change="bindTimeChange"
      >
        <picker-view-column>
          <view class="hours item" v-for="(item, i) in 24" :key="i">
            {{ i < 10 ? "0" + i : i }}
          </view>
        </picker-view-column>
        <picker-view-column>
          <view class="second item"> 00 </view>
          <view class="second item"> 30 </view>
        </picker-view-column>
      </picker-view>
      <view class="m"> : </view>
      <view class="bg-border">
        <view></view>
        <view></view>
        <view></view>
        <view></view>
      </view>
    </view>

    <view class="bottom-btn">
      <view class="b-btn">
        <view class="b" @click="confirm()">
          <button>确认</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import selectDateTimeVue from "../components/selectDateTime.vue";
export default {
  components: {
    selectDateTimeVue,
  },
  data() {
    return {
      // 服务时间类型
      typeValue: 0, //0每周 1每月
      weekList: [
        {
          text: "周一",
          value: "1",
          isSelect: false,
        },
        {
          text: "周二",
          value: "2",
          isSelect: false,
        },
        {
          text: "周三",
          value: "3",
          isSelect: false,
        },
        {
          text: "周四",
          value: "4",
          isSelect: false,
        },
        {
          text: "周五",
          value: "5",
          isSelect: false,
        },
        {
          text: "周六",
          value: "6",
          isSelect: false,
        },
        {
          text: "周日",
          value: "0",
          isSelect: false,
        },
      ],
      timeValue: [],
      DateList: [],
      dateVlaue: [],
    };
  },
  onShow() {
    this.initDate();
  },
  methods: {
    initDate() {
      let dayDATA = this.$dayjs();
      let YM = dayDATA.format("YYYY-MM") + "-01";
      let first_week = this.$dayjs(YM).day();
      let daysInMonth = dayDATA.daysInMonth();
      let nowDay = dayDATA.date();
      for (let i = 0; i < first_week; i++) {
        this.DateList.push({
          text: "",
          value: null,
        });
      }
      for (let i = 0; i < daysInMonth; i++) {
        this.DateList.push({
          text: i + 1,
          value: i + 1,
        });
      }
    },

    checkDay(item) {
      let value = this.dateVlaue;
      if (value.length < 5) {
        if (value.includes(item.value)) {
          let i = value.indexOf(item.value);
          value.splice(i, 1);
        } else {
          value.push(item.value);
        }
      } else {
        if (value.includes(item.value)) {
          let i = value.indexOf(item.value);
          value.splice(i, 1);
        }
      }
      this.dateVlaue = value;
    },

    bindTimeChange(val) {},
    // 确认
    confirm() {
      uni.showToast({
        title: "该功能暂未开放",
        icon: "none",
      });
    },
  },
};
</script>

<style>
page {
  background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.container {
  .tip {
    font-weight: bold;
    font-size: 32rpx;
    color: #e72a2a;
    line-height: 44rpx;
    padding: 22rpx;
    box-sizing: border-box;
    background: #ffeeee;
  }
  .old-time {
    padding: 20rpx 22rpx;
    box-sizing: border-box;
    .title {
      font-weight: bold;
      font-size: 34rpx;
      color: #333333;
      line-height: 48rpx;
    }
    .value {
      font-weight: bold;
      font-size: 30rpx;
      color: #333333;
      line-height: 42rpx;
      margin-top: 20rpx;
    }
  }
  .select-new {
    border-top: 20rpx solid #f8f8f8;
    .tab-btn {
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      button {
        width: 340rpx;
        height: 96rpx;
        background: #f5f5f5;
        border-radius: 20rpx;
        font-weight: bold;
        font-size: 36rpx;
        color: #999999;
        line-height: 96rpx;
        &.select {
          background: linear-gradient(90deg, #ffa233 0%, #fb4c4c 100%);
          color: #ffffff;
        }
      }
    }
  }

  .select-week {
    padding: 0 22rpx;
    box-sizing: border-box;
    border-top: 20rpx solid #f8f8f8;
    display: flex;
    flex-wrap: wrap;
    .w-item {
      width: 50%;
      border-bottom: 2rpx solid #f8f8f8;
      padding: 24rpx 0;
      &:nth-last-child(1),
      &:nth-last-child(1) {
        border-bottom: none;
      }
      &:nth-child(odd) {
        width: calc(50% - 2rpx);
        border-right: 2rpx solid #f8f8f8;
        padding-right: 42rpx;
      }
      &:nth-child(even) {
        padding-left: 40rpx;
      }
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .checkbox {
        image {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }
  }

  .select-date {
    padding: 0;
    border-top: 20rpx solid #f8f8f8;
    .title {
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
      line-height: 44rpx;
      padding: 32rpx 22rpx 0;
    }
    .week-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 30rpx;
      .w-i {
        width: calc(100% / 7 - 12rpx);
        font-weight: bold;
        font-size: 32rpx;
        color: #333333;
        line-height: 44rpx;
        // margin: 0 22rpx;
        text-align: center;
      }
    }
    .date-item {
      display: flex;
      flex-wrap: wrap;
      margin-top: 2rpx;
      padding: 0 0rpx;
      box-sizing: border-box;
      .item {
        width: calc(100% / 7 - 12rpx);
        padding-bottom: calc(100% / 7 - 12rpx);
        margin: 10rpx 6rpx 0;
        position: relative;
        border-radius: 16rpx;
        text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
          font-weight: 400;
          font-size: 32rpx;
          color: #333333;
        }

        &.select {
          background-color: #e72a2a;
          text {
            color: #ffffff;
            font-weight: 800;
          }
        }
        &.disabled {
          text {
            color: #999999;
          }
        }
      }
    }
  }

  .select-time {
    padding: 0 22rpx;
    box-sizing: border-box;
    border-top: 20rpx solid #f8f8f8;
    position: relative;
    .time-picker {
      width: 100%;
      height: 250px;
      .item {
        font-weight: bold;
        font-size: 32rpx;
        color: #333333;
        line-height: 50px;
        text-align: center;
        // border-bottom: 2rpx solid #F8F8F8;
      }
      /deep/ .maskClass {
        opacity: 0;
      }
      /deep/ .indicator {
        opacity: 0;
      }
    }
    .m {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      z-index: 3;
      font-weight: 800;
      font-size: 40rpx;
      color: #333333;
      line-height: 50px;
    }
    .bg-border {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      padding: 0 22rpx;
      box-sizing: border-box;
      & > view {
        width: 100%;
        height: 49px;
        border-bottom: 1px solid #f8f8f8;
        background-color: transparent;
      }
    }
  }
}

.bottom-btn {
  width: 100%;
  height: calc(136rpx + constant(safe-area-inset-bottom));
  height: calc(136rpx + env(safe-area-inset-bottom));

  .b-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .b {
      padding: 20rpx 22rpx;
      box-sizing: border-box;
      button {
        height: 96rpx;
        background: linear-gradient(132deg, #ffa233 0%, #fb4c4c 100%);
        border-radius: 48rpx 48rpx 48rpx 48rpx;
        font-weight: bold;
        font-size: 36rpx;
        color: #ffffff;
        line-height: 96rpx;
      }
    }
  }
}
</style>
